import * as THREE from "three"
import { CSS3DRenderer } from "three/examples/jsm/Addons.js";
export class OccludeHtml {

    /** @type {CSS3DRenderer} */
    renderer

    constructor() {



    }

    init() {

        const renderer = new CSS3DRenderer();
        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.top = 0;
        this.renderer = renderer

        document.getElementById('sketch_three_canvas').insertAdjacentElement("afterbegin", renderer.domElement);

    }

    /**
     * 创建自定义 HTMLDivElement
     * @returns { HTMLDivElement }
     */
    createDiv() {

        return document.createElement("custom-div");

    }

    /**
     * 创建 3d 文字
     * @param {string} text 
     */
    createCSS3DObject(text) {

    }

}


export class CustomDivElement extends HTMLElement {

    constructor() {

        super()

    }

    connectedCallback() {

        console.log("自定义元素加入页面")

        // 创建平面
        const width = this.clientWidth
        const height = this.clientHeight
        const geometry = new THREE.BoxGeometry(width, height, 1)

        // 剩余逻辑，相同 ......

        this.__update()

    }

    disconnectedCallback() {

        console.log("自定义元素从页面移除")

    }

    adoptedCallback() {

        console.log("自定义元素转移到新页面")

    }

    attributeChangedCallback(name, oldValue, newValue) {

        console.log("自定义元素属性发生变化")

        this.__update()

    }

    __update() {

        // update

    }

}

customElements.define("custom-div", CustomDivElement)